<template>
    <div :style="background" class="login_container">
      <div class="navigation_bar">
      <span class="logo"> </span>
      <span class="hometag" @click="turntowelcome">首页 </span>
      <span class="registertag" @click="turntoregister">注册</span>
      <span class="logintag" @click="turntologin">登录</span>
      </div>
      <div class="login_box"> 
          
         <div class="text"> 登 录 </div>
         <!--登录表单区域-->
         <el-form ref="loginformref"  label-width="0px"  class="login_form" :model="loginform" :rules="loginformrules">
              <!--账号-->
              <el-form-item prop="ID">
              <el-input v-model="loginform.ID" placeholder="账号" prefix-icon="el-icon-mobile" ></el-input>
              </el-form-item>
               <!--密码-->
              <el-form-item prop="password">
              <el-input  v-model="loginform.password" placeholder="密码" prefix-icon="el-icon-lock" type="password"></el-input>
              </el-form-item>
              
              <el-form-item class="btns">
               <el-button  type="info" plain @click="login">登录</el-button>
               <el-button type="primary" plain  @click="resetloginform">重置</el-button>
              </el-form-item>
               
         </el-form>
              <el-link type="info" @click="turntoregister">还没有账号？前往注册></el-link>
      </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            //这是登录表单的数据绑定对象
            loginform:{
              ID: '',
              password: ''
            },
            //这是表单的验证规则对象
            loginformrules:{
              //验证用户名是否合法
              ID:[
                { required: true, message: '请输入手机号/邮箱', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
              //验证密码是否合法
              password:[
                { required: true, message: '请输入登录密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
              ]
            },
            background: {
      	    // 背景图片地址
              backgroundImage: 'url(' + require('../assets/webp.jpeg') + ')',
            // 背景图片是否重复
            backgroundRepeat: 'no-repeat',
            // 背景图片大小
            backgroundSize: '100% 105%',
            // 背景颜色
            backgroundColor: '#000',
            // 背景图片位置
            backgroundPosition: 'center top'
            } 
        }
    },
    methods:{
        //点击重置按钮，重置登录表单
        resetloginform() {
            this.$refs.loginformref.resetFields();
        },
        login() {
            this.$refs.loginformref.validate(valid =>{
             if(!valid) return;
            })
            },
        turntoregister: function(){
            this.$router.replace('/register');
        },
        turntowelcome: function(){
            this.$router.replace('/welcomepage');
        },
        turntologin: function(){
            this.$router.replace('/login');
        }
    }
};
</script>

<style scoped>

.login_container {
   /*background-color: #ecd96e;
   background: linear-gradient(#ecd96e, rgba(223, 159, 41, 0.87));*/
   height: 100%;
}
.navigation_bar{
 height: 80px;
}
.login_box{
    width: 400px;
    height: 450px;
    background-color: rgba(247,245,245,0.692);
    border-radius: 20px;/*圆角*/
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

.text{
    position: absolute;
    top:10%;
    left:40%;
    font-size: 40px;
    font-weight: 700;
    color: rgb(187, 187, 187);
}
.btns{
    display: flex;
    justify-content: center;
    position: absolute;
    left: 30%;
}

.login_form{
    position: absolute;
    top:30%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.el-link--info{
    position: absolute;
    bottom:15%;
    left:28%;
    color: antiquewhite;
}
.hometag{
    position: absolute;
    left:15%;
    top:2%;
    font-size: 23px;
    font-weight: 400;
    color: aliceblue;
}
.registertag{
    position: absolute;
    left:83%;
    top:2%;
    font-weight: 400;
    font-size: 23px;
    color: aliceblue;
}
.logintag{
    position: absolute;
    left:90%;
    top:2%;
    font-weight: 400;
    font-size: 23px;
    color: aliceblue;
}
</style>